import { useAccount } from "@/stores/account";
import { useCommentAppoint, useCommentLoop } from "@/stores/comment";
import { useSession } from "@/stores/sesstion";
import { defineComponent, ref } from "vue";
import styles from './styles.module.css';
import { parseNick, showToast } from "@/utils/utils";
import { useMonitor } from "@/stores/monitor";
import { utils, write } from "xlsx";

function sheet2blob(sheet: any, sheetName?: any) {
    sheetName = sheetName || 'sheet1';
    var workbook: any = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置项
    var wopts: any = {
        bookType: 'xlsx', // 要生成的文件类型
        bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
        type: 'binary'
    };
    var wbout = write(workbook, wopts);
    var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
    // 字符串转ArrayBuffer
    function s2ab(s: any) {
        var buf = new ArrayBuffer(s.length);
        var view = new Uint8Array(buf);
        for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
    return blob;
}

function openDownloadDialog(url: string | Blob, saveName: string) {
    if (typeof url == 'object' && url instanceof Blob) {
        url = URL.createObjectURL(url); // 创建blob地址
    }
    var aLink = document.createElement('a');
    aLink.href = url;
    aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
    var event;
    if (window.MouseEvent) event = new MouseEvent('click');
    else {
        event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    }
    aLink.dispatchEvent(event);
}

const Input = defineComponent({
    setup(_props, _ctx) {
        const monitor = useMonitor();
        return () => {
            return (
                <div >

                    <el-row class={styles.inputBox}>

                        <el-col span={15} class={styles.inputText}>
                            <el-checkbox >
                                <span v-model={monitor.checked} class={styles.inputText}>开启真实买家发言语音提醒</span>
                            </el-checkbox>
                        </el-col>

                        <el-col span={1} class={styles.inputText}></el-col>
                        <el-col span={5}><el-button size="small" type="primary" onClick={() => {
                            const arr = monitor.values.map((item) => {
                                return [item.level, parseNick(item.nick), item.text];
                            });
                            arr.unshift(['等级', "账号", '发言内容']);
                            const sheet = utils.aoa_to_sheet(arr);
                            var blob = sheet2blob(sheet);
                            openDownloadDialog(blob, '发言内容.xlsx');
                        }}>导出发言记录</el-button></el-col>
                    </el-row>
                </div >

            );
        }
    },
});


export default defineComponent({
    setup(_props, _ctx) {
        const monitor = useMonitor();
        return () => {
            return (
                <div class={[styles.app]}>
                    <Input></Input>
                    <el-table
                        size="small"
                        border
                        data={monitor.list}
                        stripe={true}
                        height="480"
                        style="width: 100%;"
                    >

                        <el-table-column
                            prop="date"
                            width="50"
                            label="等级">
                            {(item: any) => {
                                return (
                                    <p class={styles.text}>&nbsp;{item.row.level}</p>
                                );
                            }}
                        </el-table-column>
                        <el-table-column
                            label="账号"
                            width="120"
                        >
                            {(item: any) => {
                                return (
                                    <p class={styles.text}>{(item.row.nick)}</p>
                                );
                            }}
                        </el-table-column>
                        <el-table-column
                            label="发言内容">
                            {(item: any) => {
                                return (
                                    <p class={styles.text}>{item.row.text}</p>
                                );
                            }}
                        </el-table-column>
                    </el-table>
                </div>
            )
        };
    }
});